<template>
    <div>
        <h1>
            <span style="color: #409eff">{{ text1 }}</span> 的
            <span style="color: #409eff">{{ text2 }} </span> 排片计划列表
        </h1>
        <el-divider></el-divider>

        <el-table :data="plans" style="width: 100%">
            <el-table-column prop="title" label="电影名称" width="220"></el-table-column>
            <el-table-column prop="showingon_date" label="放映时间" width="220"></el-table-column>
            <el-table-column prop="showingon_time" label="场次" width="220"></el-table-column>
            <el-table-column prop="price" label="票价" width="220"></el-table-column>
            <el-table-column prop="status" label="是否已发布" width="220">
                <template slot-scope="scope">
                    <el-switch v-model="scope.row.status" active-color="#13ce66" :active-value="1" :inactive-value="0"
                        disabled>
                    </el-switch>
                </template>
            </el-table-column>

            <el-table-column fixed="right" label="操作">
                <template slot-scope="scope">
                    <el-button type="danger" icon="el-icon-delete" circle @click="delPlan(scope.row.plan_id)">
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
export default {
    data() {
        return {
            text1: "",
            text2: "",
            plans: [],
        };
    },
    methods: {
        delPlan(id) {
            this.$confirm('此操作将永久删除此项, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$http.showingonPlanApi.delete({ id: id }).then(res => {
                    if (res.data.code == 200) {
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                        this.$http.showingonPlanApi.queryByRoomId({ room_id: this.$route.params.room_id }).then((res) => {
                            this.plans = res.data.data;
                        });
                    }
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        }
    },
    mounted() {
        this.$http.showingonPlanApi.queryByRoomId({ room_id: this.$route.params.room_id }).then((res) => {
            console.log(res);
            this.plans = res.data.data;
        });
        this.$http.cinemaApi.queryById({ id: this.$route.params.id }).then((res) => {
            this.text1 = res.data.data.cinema_name;
        });
        this.$http.cinemaRoomApi.queryById({ id: this.$route.params.room_id }).then((res) => {
            this.text2 = res.data.data.cinema_room_name;
        });
    },
};
</script>

<style lang="scss" scoped>

</style>
